<template>
  <div class="main">
    <van-list v-model="loading" :finished="finished" @load="onLoad">
      <template v-if="records.length > 0">
        <BuyRecordItem v-for="item in records" :key="item.id" :record="item" @reload="handleReolad"/>
      </template>
      <template v-else>
        <template v-if="isLoad">
          <EmptyTips text="无记录" :image="NoTicketEmpty" mWidth="30" mHeight="30"/>
        </template>
      </template>
    </van-list>
  </div>
</template>

<script>
import api from "../../api";
import BuyRecordItem from "@/components/buyrecord/BuyRecordItem";
import EmptyTips from "@/components/common/EmptyTips";
import NoTicketEmpty from "../../assets/common/no-ticket-empty.png";

var onLoadTimer;

export default {
  title: "购票记录",
  bodyClass: "gray-bg",
  components: {
    BuyRecordItem,
    EmptyTips
  },
  data() {
    return {
      NoTicketEmpty,
      uid: this.$store.state.uid,
      page: 1,
      loading: false,
      finished: false,
      records: [],
      isLoad: false,
    };
  },
  methods: {
    onLoad() {
      api.usercenter.getTicketList(
        this.uid,
        this.page,
        res => {
          console.log(res);
          this.isLoad = true;
          if (res.pager.totalPages <= res.pager.nowPage) {
            this.loading = false;
            this.finished = true;
          }

          if (res.list.length < 1) {
            this.finished = true;
          }
          res.list.forEach(element => {
            this.records.push(element);
          });
          this.page += 1;
          this.loading = false;
        },
        res => {
          this.loading = false;
          this.finished = true;
          this.$toast(res.msg);
        }
      );
    },
    listClear() {
      this.records = [];
      this.page = 1
    },
    handleReolad() {
      this.listClear()
      this.onLoad()
    }
  }
};
</script>

<style lang="less" scoped>
</style>